<template>
  <van-row @click.native="toggle" class="card-score-item">
    <van-cell clickable>
      <template #icon>
        <van-image width="50px" height="30px" fit="contain" src='none'>
          <template #error>
            <span>{{score.id}}</span>
          </template>
        </van-image>
      </template>
      <template #title>
        <van-row/>
      </template>
      <template #right-icon>
        <van-checkbox :name="score" ref="checkbox"/>
      </template>
    </van-cell>
    <van-row class="card-score-item-text">
      <span>{{score.item}}</span>
    </van-row>
  </van-row>
</template>

<script>
export default {
  name: 'CardScoreItem',
  props: ['score'],
  data () {
    return {
      checked: false
    }
  },
  methods: {
    toggle () {
      this.$refs.checkbox.toggle()
    }
  },
  mounted () {
    // let index = this.selected.findIndex((item) => {
    //   return item.id === this.score.id
    // })
    // if (index > -1) {
    //   this.checked = true
    // } else {
    //   this.checked = false
    // }
  },
  watch: {
    // checked: function () {
    //   if (this.checked) {
    //     let index = this.selected.findIndex((item) => {
    //       return item.id === this.score.id
    //     })
    //     if (index < 0) {
    //       this.selected.push(this.score)
    //     }
    //   } else {
    //     let index = this.selected.findIndex((item) => {
    //       return item.id === this.score.id
    //     })
    //     if (index > -1) {
    //       this.selected.splice(index, 1)
    //     }
    //   }
    // }
  }
}
</script>

<style scoped lang="less">
  .card-score-item {
    margin-bottom: 5px;
    .card-score-item-text {
      background-color: white;
      padding: 10px 16px;
      font-size: 12px;
      color: #969799;
    }
  }
  .card-score-item:active{
    background-color: #F2F3F5;
  }
  .van-cell {
    font-size: 14px;
    padding: 5px 16px;
    .van-row {
      padding: 0px 10px;
      line-height: 30px;
    }
    span {
      font-size: 14px;
      font-weight: 600;
      color: #fcb106;
    }
    .van-cell__right-icon {
      line-height: 30px;
    }
  }
</style>
